<template>
  <el-card>
    <div slot="header" class="clearfix header">
      <div class="search-header">
        <span>线上热门搜索</span>
        <el-dropdown>
          <span class="el-dropdown-link">
            <i class="el-icon-more"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>黄金糕</el-dropdown-item>
            <el-dropdown-item>狮子头</el-dropdown-item>
            <el-dropdown-item>螺蛳粉</el-dropdown-item>
            <el-dropdown-item>双皮奶</el-dropdown-item>
            <el-dropdown-item>蚵仔煎</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div>
      <el-row>
        <el-col :span="12">
          <div class="search1">
            <span class="search-name">搜索用户数</span>
            <span class="svgimg"
              ><svg
                t="1685188379256"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4857"
                width="16"
                height="16"
              >
                <path
                  d="M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m0 73.142857C323.486476 170.666667 170.666667 323.486476 170.666667 512s152.81981 341.333333 341.333333 341.333333 341.333333-152.81981 341.333333-341.333333S700.513524 170.666667 512 170.666667z m36.571429 268.190476v292.571428h-73.142858V438.857143h73.142858z m0-121.904762v73.142857h-73.142858v-73.142857h73.142858z"
                  p-id="4858"
                  fill="#bfbfbf"
                ></path></svg
            ></span>
          </div>
          <div class="search2">
            <span class="search-number">12321</span>
            <span
              >17.2<svg
                t="1685188611499"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6055"
                width="16"
                height="16"
              >
                <path
                  d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
                  fill="#cdcdcd"
                  p-id="6056"
                ></path></svg
            ></span>
          </div>
          <div class="charts">
            <lineCharts></lineCharts>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="search1">
            <span class="search-name">人均搜索次数</span>
            <span class="svgimg"
              ><svg
                t="1685188379256"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4857"
                width="16"
                height="16"
              >
                <path
                  d="M512 97.52381c228.912762 0 414.47619 185.563429 414.47619 414.47619s-185.563429 414.47619-414.47619 414.47619S97.52381 740.912762 97.52381 512 283.087238 97.52381 512 97.52381z m0 73.142857C323.486476 170.666667 170.666667 323.486476 170.666667 512s152.81981 341.333333 341.333333 341.333333 341.333333-152.81981 341.333333-341.333333S700.513524 170.666667 512 170.666667z m36.571429 268.190476v292.571428h-73.142858V438.857143h73.142858z m0-121.904762v73.142857h-73.142858v-73.142857h73.142858z"
                  p-id="4858"
                  fill="#bfbfbf"
                ></path></svg
            ></span>
          </div>
          <div class="search2">
            <span class="search-number">2.7</span>
            <span
              >24.3<svg
                t="1685188611499"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="6055"
                width="16"
                height="16"
              >
                <path
                  d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"
                  fill="#cdcdcd"
                  p-id="6056"
                ></path></svg
            ></span>
          </div>
          <div class="charts">
            <lineCharts></lineCharts>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="footer">
      <el-table style="width: 100%" border>
        <el-table-column label="排名" type="index" sortable width="80">
        </el-table-column>
        <el-table-column label="搜索关键字" sortable width="100">
        </el-table-column>
        <el-table-column label="用户数" width="width"> </el-table-column>
        <el-table-column label="周涨幅" width="width"> </el-table-column>
      </el-table>
    </div>
    <!-- @size-change="handleSizeChange"
        @current-change="handleCurrentChange" -->
    <el-pagination :current-page="1" :page-size="5" :total="60">
    </el-pagination>
  </el-card>
</template>

<script>
import lineCharts from "./lineChart";
export default {
  name: "",
  components: { lineCharts },
};
</script>

<style lang="less" scoped>
.search-header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  span {
    font-weight: 800;
  }
}
.search-name {
  color: #eeeeee;
  margin-right: 10px;
}

.search1 {
  display: flex;
  justify-items: center;
  margin-bottom: 10px;
}
.search2 {
  display: flex;
  justify-items: center;
  margin-bottom: 10px;
}

.search-number {
  font-size: 20px;
  margin-right: 30px;
}

.charts {
  width: 100%;
  height: 40px;
}
.header {
  border-bottom: 1px solid #eee;
  padding: 10px 0px;
}

.footer {
  margin-top: 10px;
}
</style>